<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container-fluid">
    <div class="navbar-header" ng-include="'app-navbar-header.html'"></div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="mindtagger-navbar-collapse">
      <ul class="nav navbar-nav" ng-controller="MindtaggerTaskListCtrl">
        <li class="dropdown" ng-if="mindtaggerTasks.length > 1">
          <a class="dropdown-toggle">{{MindtaggerTask.name}} <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li ng-repeat="task in mindtaggerTasks" ng-if="task.name != MindtaggerTask.name"><a href="#/mindtagger/{{task.name}}">{{task.name}}</a></li>
          </ul>
        </li>
        <li ng-if="mindtaggerTasks.length == 1" class="active"><a href="#/mindtagger/{{MindtaggerTask.name}}">{{MindtaggerTask.name}}</a></li>
      </ul>

      <form class="navbar-form navbar-left" role="search"
          ng-if="MindtaggerTask.groupFilter"
          ng-init="groupFilter = MindtaggerTask.groupFilter"
          ng-submit="MindtaggerTask.updateFilter(groupFilter)">
        <div class="input-group">
          <span class="input-group-addon"><i class="fa fa-filter"></i></span>
          <input type="text"
            placeholder="Showing all"
            ng-model="groupFilter"
            ng-blur="MindtaggerTask.updateFilter(groupFilter)"
            typeahead="g for g in MindtaggerTask.loadGroupNames($viewValue)"
            typeahead-loading="loadingGroupNames"
            class="form-control">
          <i ng-show="loadingGroupNames" class="glyphicon glyphicon-refresh"></i>
          <div class="input-group-btn">
            <a class="btn btn-default" disabled ng-disabled="MindtaggerTask.grouping.previous == null" ng-click="MindtaggerTask.updateFilter(MindtaggerTask.grouping.previous)"><i class="fa fa-chevron-up"></i></a>
            <a class="btn btn-default" disabled ng-disabled="MindtaggerTask.grouping.next     == null" ng-click="MindtaggerTask.updateFilter(MindtaggerTask.grouping.next    )"><i class="fa fa-chevron-down"></i></a>
          </div>
        </div>
      </form>

      <ul class="nav navbar-nav navbar-right">
        <!-- <li><a> -->
        <!--     <s> -->
        <!--       <i class="glyphicon glyphicon-cog"></i> Setup -->
        <!--     </s> -->
        <!-- </a></li> -->
        <li><a data-toggle="modal" data-target="#export-modal">
          <i class="glyphicon glyphicon-save"></i> Export
        </a></li>
      </ul>

      <!-- Plug in navbar buttons for the configured mode -->
      <span ng-transclude></span>
    </div><!-- /.navbar-collapse -->
  </div>
</nav>
<style>body { padding-top: 70px; }</style>
